<script setup>
import axios from "axios";
import { ref, onMounted,h } from "vue";
import { ElNotification } from 'element-plus'
onMounted(() => {
  getUserData();
});
const getUserData = async () => {
  let { data } = await axios.get("http://localhost:3000/userList");
  let i = data.findIndex((item) => item.id == "root");
  data.splice(i, 1);
  tableData.value = data;
};

const tableData = ref([]);

const deleteRow = async (index, id) => {
  console.log(id, index);
  tableData.value.splice(index, 1);
  await axios.delete(`http://localhost:3000/userList/${id}`);
  ElNotification({
    title: '提示',
    message: h('i', { style: 'color: red' }, `id为${id}的用户被删除`),
  })
  getUserData();
};
</script>

<template>
  <div class="user">
    <h1>用户管理:</h1>
    <hr>
    <br />
    <el-table :data="tableData" style="width: 100%" max-height="650">
      <el-table-column fixed prop="username" label="名字" width="150" />
      <el-table-column fixed prop="id" label="id" width="100" />
      <el-table-column prop="name" label="昵称" width="120" />
      <el-table-column prop="phone" label="手机号" width="120" />
      <el-table-column prop="password" label="密码" width="120" />
      <el-table-column prop="img" label="头像" width="100">
        <template #default="scope">
          <img
            :src="scope.row.img"
            alt="头像"
            style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover"
          />
        </template>
      </el-table-column>
      <el-table-column prop="introduce" label="简介" width="600" />
      <el-table-column fixed="right" label="删除" min-width="80">
        <template #default="scope">
          <el-button
            link
            type="danger"
            size="small"
            @click.prevent="deleteRow(scope.$index, scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
@import url("/src/assets/style/admin/users/users.scss");
</style>
